<template>
    <div class="container">
        <Header></Header>
        <div class="content">
            <div class="content-top">
                <el-carousel trigger="click" height="55vw" indicator-position="outside">
                    <el-carousel-item>
                        <img src="./images/honor_banner1.png" alt="证书封套">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="./images/honor_banner2.png" alt="省级荣誉证书" loading="lazy">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="./images/honor_banner3.png" alt="艺术人才证书" loading="lazy">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="./images/honor_banner4.png" alt="教师荣誉证书" loading="lazy">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="./images/honor_banner5.png" alt="国家级荣誉证书" loading="lazy">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="./images/honor_banner6.png" alt="社会实践证书" loading="lazy">
                    </el-carousel-item>
                    <el-carousel-item>
                        <img src="./images/honor_banner7.png" alt="组织单位荣誉牌匾" loading="lazy">
                    </el-carousel-item>
                </el-carousel>
            </div>
            <img class="slogen" src="./images/honor_slogen.png" alt="" loading="lazy">
            <div class="honor_bottom">
                <div class="honor_bottom_title">
                    <img src="./images/honor_title.png" alt="">
                </div>
                <div class="realShotsImages">
                    <div class="realShots_top">
                        <div class="realShots_top_item">
                            <h3>荣誉奖牌</h3>
                            <el-carousel trigger="click" height="15vw" indicator-position="outside" :autoplay="false" arrow="never">
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-15.png" alt="荣誉奖牌">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-16.png" alt="荣誉奖牌" loading="lazy">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-17.png" alt="荣誉奖牌" loading="lazy">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-18.png" alt="荣誉奖牌" loading="lazy">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-19.png" alt="荣誉奖牌" loading="lazy">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="realShots_top_item">
                            <h3>奖牌收纳</h3>
                            <el-carousel trigger="click" height="15vw" indicator-position="outside" :autoplay="false" arrow="never">
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-20.png" alt="奖牌收纳">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-21.png" alt="奖牌收纳" loading="lazy">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-22.png" alt="奖牌收纳" loading="lazy">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-23.png" alt="奖牌收纳" loading="lazy">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                    <div class="realShots_bottom">
                        <div class="realShots_bottom_item">
                            <h3>荣誉奖杯</h3>
                            <el-carousel trigger="click" height="25vw" indicator-position="outside" :autoplay="false" arrow="never">
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-25.png" alt="荣誉奖杯">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-24.png" alt="荣誉奖杯" loading="lazy">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                        <div class="realShots_bottom_item">
                            <h3>荣誉合集</h3>
                            <el-carousel trigger="click" height="25vw" indicator-position="outside" :autoplay="false" arrow="never">
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-26.png" alt="荣誉合集">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-27.png" alt="荣誉合集" loading="lazy">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-28.png" alt="荣誉合集" loading="lazy">
                                </el-carousel-item>
                                <el-carousel-item>
                                    <img src="./images/韶华官网(1)-29.png" alt="荣誉合集" loading="lazy">
                                </el-carousel-item>
                            </el-carousel>
                        </div>
                    </div>
                </div>
            </div>
            <div class="footer">
                <Footer></Footer>
            </div>
        </div>
    </div>
</template>
<script>
import Footer from '@/components/Footer/Footer.vue';
import Header from '../../components/Header/Header.vue';

export default {
    name: 'honor',
    components: {
        Header, Footer
    },
    data() {
        return {

        }
    }
}
</script>
<style scoped>
.content-top {
    width: 100%;
    height: 60vw;
    background-size: 100% 100%;
    background-image: url('./images/background_top.png');
}

.el-carousel__item img {
    width: 100%;
    height: 100%;
}

.slogen {
    width: 100%;

}

.honor_bottom {
    width: 100%;
    height: 80vw;
    margin-top: -1vw;
    background-size: 100% 100%;
    background-image: url('./images/honor_bottom.png');
}

.honor_bottom_title {
    width: 100%;
    height: 20vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

.honor_bottom_title img {
    width: 20%;
}

.realShotsImages {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}

.realShots_top {
    width: 100%;
    height: 20vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 5vw;
}

.realShots_top_item {
    width: 35vw;
}

.realShots_top_item img {
    width: 24vw;
}

.realShots_bottom {
    width: 100%;
    height: 30vw;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.realShots_bottom_item {
    width: 26vw;
}

.realShots_bottom_item img {
    width: 18vw;
}

h3 {
    font-size: 40px;
    margin-bottom: 1vw;
    font-weight: normal;
    color: #B6945D;
}

.footer {
    width: 100%;
    height: 10vw;
}

/* 手机/小屏幕 */
@media (max-width: 960px) {
    .honor_bottom_title img {
        width: 35%;
    }

    .realShots_top {
        margin-bottom: 8vw;
    }

    .honor_bottom_title {
        height: 15vw;
    }

    h3 {
        margin-top: 20px;
        font-size: 15px;
    }

    .footer {
        height: 25vw;
    }
}
</style>